<template>
	<view class="bods">
		<!-- //遮罩层 -->
		<view @click="show='true'" v-if="!show" class="propos">
		</view>
		<view style="background-color: white;">
			<!-- 查找筛选 -->
			<view class="seler">
				<u-search 
					:clearabled='true' 
					placeholder="请输入主题内容" 
					v-model="page.searchtext" 
					:showAction='false'
					@clear="clear"
					@search="search">
				</u-search>
				<view class="wf-space-between">
				      <text class="descText">共{{ page.total }}条</text>
				  <view style="display: flex;align-items:center;justify-content: center;margin-right: 10px;">
					  <view >
						  <text style="font-size: 28upx;color: #3296fa;">批量审批</text>
						  <text style="margin-left: 10px;color: #ccc;">|</text>
					  </view>
					  <view class="ly-filter-item" @click="show = !show">
						  <text class="name">筛选</text>
						  <image style="width: 24upx; height: 24upx;margin: 0 2px;" src="../../static/oa/icon-xia.png">
						  </image>
					  </view>
				  </view>
			  </view>
			</view>
		</view>
		<!-- //筛选列表 -->
		<view v-if="!show">
			<screen-prop type="1" :pageData="page" @filterSubmit="filterSubmit"></screen-prop>
		</view>
		<!-- 我的代办 -->
		<view class="todo_list" v-if="filelist.length > 0">
			<view class="rowf" v-for="(item, index) in filelist" :key="index">
				<view class="rowf_l">
					<image src="../../static/oa/danju.png" style="width: 70rpx;height:70rpx;vertical-align: bottom;"></image>
					<p class='rowf_txt'><text>{{ item.creatorRealName }}</text><span
							style='color:#999999'>丨</span><text>{{ item.appName }}</text>
					</p>
					<checkbox-group v-show="checkbox_show">
						<label>
							<checkbox @click="checkbox(item.state,index)" :checked="item.state" />
						</label>
					</checkbox-group>
				</view>

				<view class="">
					<view class="Hawork-work">
						<view class="Hawork_god_work">
							<span class='sright-work'>单据编号</span>
							<span class='sright-work-text'>{{ item.businessKey }}</span>
						</view>
						<view class="Hawork_god_work">
							<span class='sright-work'>发起时间</span>
							<span class='sright-work-text'>{{ item.createdTime }}</span>
						</view>
						<view class="Hawork_god_work">
							<span class='sright-work'>主题内容</span>
							<span class='sright-work-text'>{{ item.workflowTitle }}</span>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="unik">
					<p class='texttwo' style='margin-right:20rpx ;' @click="openWorkflowfromView(item)">详  情</p>
					<p class='texttwo' style='margin:0 20rpx; color: #4ed218;border: 1px solid #4ed218;' @click="processWorkflow(item)">通  过</p>
					<p class='texttwo' style='color: #999;border:1px solid #999'>驳  回</p>
				</view>
			</view>
		</view>
		<view class="todo_list" v-if="filelist.length == 0">
			<image  mode="widthFix" src="../../static/oa/pic_zanwushuju@3x.png" class="nomore_img">
			<view class="nomore_text">亲，暂无数据哟</view>
		</view>
		<!-- 底部 -->
		<view style="margin-bottom: 20rpx;" v-if="filelist.length > 0">
			<u-loading-icon :show='loadshow' mode="circle" timing-function="linear" duration="800" textSize='14'
				text='正在加载中...'></u-loading-icon>
			<p v-if="!loadshow" style='width: 100%;text-align: center;color: #666666;'>没有更多了...</p>
		</view>
	</view>
</template>

<script>
	import screenProp from "./screenProp.vue"
	export default {
		components: { screenProp },
		data() {
			return {
				checkbox_show: false, //批量处理选择
				show: true,
				tablist: [],
				page: {
					WorkflowTitle:'' ,
					AppName: '',
					AppCode: '',
					AppAlias: '',
					AppId: '',
					InCategoryCode: '',
					Urgency: '',
					CurrentActivityName: '',
					SheetId: '',
					CreatorRealName: '',
					WorkflowInstanceState: '',
					StartTime: '',
					EndTime: '',
					searchtext: '',
					searchfields: 'SheetId,WorkflowTitle',
					filterType: 'all',
					page: 1,
					rows: 10,
					total: 0,
					sort: "createdTime",
					order: "desc",
					pageCount: 1
				}, //分页工具
				rows: [],
				filelist: [],
				loadshow: false,
			}
		},
		created() {
			this.loadList(1)
		},
		methods: {
			//审批
			processWorkflow(item){
				let that = this
				var parms = {
					taskId: item.taskId,
					opinion: "同意"
				};
				that.$myObject.toAjaxJson("/rest/api/processEnactmentApi/", "approvalTask", parms, function(data) {
					if(data.success === true){
						that.loadList(1)
						that.$api.showTip("审批成功");
					} else {
						console.log('服务器错误')
					}
				});
			},
			//查看详情
			openWorkflowfromView:function(row) {
				var appId = row.appId;
				var formAction = 2;
				var wiid = row.workflowInstanceId;
				var taskId = row.taskId;
				var title = row.workflowTitle;
				var url = __webpath + "/workflow/businessMP/workflowform?formAction=" + formAction + "&appId=" + appId +
					"&wiid=" + wiid + "&taskId=" + taskId;
				FUI.Window.ngto(url);
				
			},
			layz() {
				let that = this
				setTimeout(function() {
					if (that.page.pageCount == that.page.page) {
						that.loadshow = false
						return false
					} else {
						that.loadshow = true
						that.page.page += 1;
						that.loadList()
						console.log('加载')
					}
				}, 200)

			},
			//获取列表数据
			loadList(pageIndex) {
				let that = this
				if(pageIndex == 1){
					that.filelist= [];
					that.rows= [];
					that.page.page = pageIndex;
				}
				var parms = {
					...that.page
				};
				that.$myObject.toAjaxJson("/workflow/workflowBusiness/", "getTodoListJson", parms, function(data) {
					if(data.success === true){
						that.page.total = data.total;
						that.page.pageCount = data.pageCount;
						for (let i = 0; i < data.rows.length; i++) {
							that.rows.push(data.rows[i])
						}
						that.filelist = that.rows;
					}else{
						console.log('服务器错误')
					}
				});

			},
			// 批量操作
			checkbox(state, index) {
				console.log(state, index)
			},
			//搜索
			search(value) {
				this.page.searchtext = value;
				this.loadList(1)
			},
			//清除搜索
			clear(){
				this.page.searchtext = "";
				this.loadList(1)
			},
			filterSubmit(obj){
				this.show= true
				this.page= obj;
				this.loadList(1)
			}
		},
	}
</script>

<style lang="scss" scoped>
	view {
		font-family: pf
	}
</style>
